<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CoSE</title>
<script src="js/jquery.min.js"></script>
<script src="js/cytoscape.js"></script>

<script type='text/javascript' src='js/src/layout/Cluster.js'></script>
<script type='text/javascript' src='js/src/layout/ClusterManager.js'></script>
<script type='text/javascript' src='js/src/layout/LGraphObject.js'></script>
<script type='text/javascript' src='js/src/layout/Layout.js'></script>
<script type='text/javascript' src='js/src/layout/LayoutConstants.js'></script>
<script type='text/javascript' src='js/src/layout/LayoutOptionsPack.js'></script>
<script type='text/javascript' src='js/src/layout/LGraphManager.js'></script>
<script type='text/javascript' src='js/src/layout/fd/FDLayout.js'></script>
<script type='text/javascript' src='js/src/layout/fd/FDLayoutConstants.js'></script>
<script type='text/javascript' src='js/src/layout/cose/CoSEConstants.js'></script>
<script type='text/javascript' src='js/src/layout/cose/CoSELayout.js'></script>
<script type='text/javascript' src='js/src/layout/cose/CoSEGraphManager.js'></script>
<script type='text/javascript' src='js/src/util/RectangleD.js'></script>
<script type='text/javascript' src='js/src/util/Point.js'></script>
<script type='text/javascript' src='js/src/util/IGeometry.js'></script>
<script type='text/javascript' src='js/src/util/DimensionD.js'></script>
<script type='text/javascript' src='js/src/util/IndexedObjectSort.js'></script>
<script type='text/javascript' src='js/src/util/IMath.js'></script>
<script type='text/javascript' src='js/src/util/Transform.js'></script>

<style id="jsbin-css">
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
$(function(){ // on dom ready

var cy = cytoscape({
  container: document.getElementById('cy'),
  
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],
  
  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' } },
      { data: { id: 'b' } },
      { data: { id: 'c', parent: 'b' } },
      { data: { id: 'd' } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' } }
    ],
    edges: [
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } }
      
    ]
  },
  
  layout: {
    name: 'cose',
    padding: 5
  }
});

}); // on dom ready
</script>
</body>
</html>